<template>

  <zero-dialog :showDialog.sync="addUpdateFormVisible"
               :fullscreen.sync="fullscreen"
               :btnExist="btnExist"
               :loading="loading"
               :title="title"
               :submit="addOrupdate">

    <div slot="body"
         style="height:220px">
      <el-form :model="addUpdateForm"
               :rules="rules"
               label-width="80px"
               ref="addUpdateFormRef">

        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item prop="name"
                          label="用户账号">
              <el-input v-model.trim="addUpdateForm.name"
                        placeholder="请输入用户账号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="昵称">
              <el-input v-model.trim="addUpdateForm.nickName"
                        placeholder="请输入昵称" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="12">

            <el-form-item prop="mobile"
                          label="手机号">
              <el-input v-model.trim="addUpdateForm.mobile"
                        placeholder="请输入手机号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="updateExist"
                          prop="password"
                          label="用户密码">
              <el-input v-model.trim="addUpdateForm.password"
                        placeholder="请输入用户密码"
                        show-password />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="12">

            <el-form-item label="用户角色">
              <el-select v-model="modelRoles"
                         filterable
                         clearable
                         multiple
                         placeholder="请选择角色"
                         style="width:100%">
                <el-option v-for="item in roles"
                           :key="item.id"
                           :label="item.name"
                           :value="item.id"
                           :disabled="item.state === 0" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="state"
                          label="角色状态">
              <el-tooltip :content="addUpdateForm.state==='ENABLE'?'点击禁用':'点击启用'"
                          placement="top">
                <el-switch v-model="addUpdateForm.state"
                           active-value="ENABLE"
                           inactive-value="DISABLE">
                </el-switch>
              </el-tooltip>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注">
          <el-input type="textarea"
                    v-model="addUpdateForm.remarks"
                    placeholder="请输入备注" />
        </el-form-item>
      </el-form>
    </div>
  </zero-dialog>
</template>

<script>
export default {
  name: 'AddUpdateForm',
  props: {
    addUrl: String,
    updateUrl: String,
    getDataList: {
      type: Function,
      default: null
    }
  },
  data () {
    return {
      loading: false,
      fullscreen: false, // 弹框全屏
      btnExist: true, // 按钮是否存在
      updateExist: true, // 修改时，是否存在的输入框
      addUpdateFormVisible: false, // 是否显示弹框
      title: '', // 弹框标题
      addUpdateForm: {},
      modelRoles: [],
      roles: [],
      rules: {
        name: [{ required: true, message: '请输入用户账号', trigger: 'blur' }],
        password: [
          { required: true, message: '请输入用户密码', trigger: 'blur' }
        ],
        mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        state: [{ required: true, message: '请选择用户状态', trigger: 'blur' }]
      }
    }
  },
  methods: {
    initRoles () {
      // 角色初始化
      this.$axios({ url: 'sysRole/getIdAndName', method: 'get' }).then(
        (res) => {
          this.roles = res.data
        }
      )
    },
    initDialog (row) {
      this.initRoles()
      // 新增或修改
      this.addUpdateFormVisible = true
      this.addUpdateFormReset()
      if (row) {
        this.updateExist = false
        row.type += '' // 转成字符串,不然select控件不支持回显
        this.title = '修改用户'
        this.addUpdateForm = JSON.parse(JSON.stringify(row))
        if (row.roles) {
          this.modelRoles = row.roles.map((it) => it.id)
        }
      } else {
        this.updateExist = true
        this.title = '新增用户'
      }
    },
    addOrupdate () {
      // 添加或修改
      this.$refs.addUpdateFormRef
        .validate()
        .then(() => {
          var oldAddUpdateForm = JSON.parse(
            JSON.stringify(this.addUpdateForm)
          )
          if (!oldAddUpdateForm.id) {
            oldAddUpdateForm.password = this.$getRsaCode(
              oldAddUpdateForm.password
            )
          }
          this.loading = true
          this.btnExist = false
          oldAddUpdateForm.roles = this.modelRoles.map((it) => {
            return { id: it }
          })
          const config = {
            url: oldAddUpdateForm.id ? this.updateUrl : this.addUrl,
            method: 'post',
            data: oldAddUpdateForm
          }
          this.$axios(config)
            .then((res) => {
              this.loading = false
              this.addUpdateFormVisible = false
              this.btnExist = true
              this.getDataList()
              this.$message.success(res.msg)
            })
            .catch(() => {
              this.loading = false
              this.btnExist = true
            })
        })
        .catch(() => {
        })
    },
    addUpdateFormReset () {
      // 重置表单
      this.addUpdateForm = {
        state: 'ENABLE'
      }
      this.modelRoles = []
      this.$nextTick(() => {
        this.fullscreen = false
        this.$refs.addUpdateFormRef.clearValidate()
      })
    }
  }
}
</script>
